// create by zhangguangde
// 评论页面

import React from 'react';
import $ from 'jquery';
import CommentSelecterModule from './commentSelecter.module.scss';

class CommentSelecter extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }
    // UNSAFE_componentWillMount() {
    // }
    componentDidMount() {
        // 绑定点击 评论类型
        $('.' + CommentSelecterModule['CommentSelecter'] + ' section .' + CommentSelecterModule['comment-select-tittle'] + ' .' + CommentSelecterModule['comment-select-type'] + '.comment-type').on('click', function() {
            // 收回菜单
            $('.' + CommentSelecterModule['CommentSelecter'] + ' ul.reply-type-item').hide('fast');
            // 弹出或收回菜单
            $('.' + CommentSelecterModule['CommentSelecter'] + ' ul.comment-type-item').toggle('fast');
        });
        // 绑定点击 评论状态
        $('.' + CommentSelecterModule['CommentSelecter'] + ' section .' + CommentSelecterModule['comment-select-tittle'] + ' .' + CommentSelecterModule['comment-select-type'] + '.reply-type').on('click', function() {
            // 收回菜单
            $('.' + CommentSelecterModule['CommentSelecter'] + ' ul.comment-type-item').hide('fast');
            // 弹出或收回菜单
            $('.' + CommentSelecterModule['CommentSelecter'] + ' ul.reply-type-item').toggle('fast');
        });
        // 选择的场合
        $('.' + CommentSelecterModule['CommentSelecter'] + ' ul li').on('click', function() {
            // 弹出或收回菜单
            $('.' + CommentSelecterModule['CommentSelecter'] + ' ul').hide('fast');
            // 更换文案
            if (this.parentElement.className === 'comment-type-item') {
                // 评论类型的场合
                $('.' + CommentSelecterModule['CommentSelecter'] + ' section .' + CommentSelecterModule['comment-select-tittle'] + ' .comment-type span')[0].innerHTML = $(this)[0].innerHTML;
            } else {
                // 恢复状态的场合
                $('.' + CommentSelecterModule['CommentSelecter'] + ' section .' + CommentSelecterModule['comment-select-tittle'] + ' .reply-type span')[0].innerHTML = $(this)[0].innerHTML;
            }
        });

        // 设置默认评论类型和回复状态
        this.setState({
            // 全部评论
            commentTypeId: this.props.commentTypeList[0].commentTypeId,
            // 全部状态
            replyTypeId: this.props.replyTypeList[0].replyTypeId
        }, function() {
        });

    }
    // componentWillReceiveProps(newProps) {}
    // shouldComponentUpdate(newProps, newState) {
    //     return true;
    // }
    // componentWillUpdate(nextProps, nextState) {}
    // componentDidUpdate(prevProps, prevState) {}
    // componentWillUnmount() {}

    // 设置评论类型id
    setCommentTypeId = (commentTypeId) => {
        this.setState({
            commentTypeId: commentTypeId
        }, function() {
            // 回调函数
            // 获取评论
            this.props.getComment();
        });
    }
    // 设置回复状态id
    setReplyTypeId = (replyTypeId) => {
        this.setState({
            replyTypeId: replyTypeId
        }, function() {
            // 回调函数
            // 获取评论
            this.props.getComment();
        });
    }

    render() {

        return (
            <div className={CommentSelecterModule['CommentSelecter']}>

                <section>
                    <div className={CommentSelecterModule['comment-select-tittle']}>
                        <div className={CommentSelecterModule['comment-select-type'] + ' comment-type'}>
                            <span>{this.props.commentTypeList[0].commentTypeName}</span>
                            <i className={CommentSelecterModule['bottom-arrow']}></i>
                        </div>
                        <div className={CommentSelecterModule['comment-select-type'] + ' reply-type'}>
                            <span>{this.props.replyTypeList[0].replyTypeName}</span>
                            <i className={CommentSelecterModule['bottom-arrow']}></i>
                        </div>
                    </div>
                    <ul className={'comment-type-item'}>
                        {
                            /* 循环评论类型列表 */
                            this.props.commentTypeList.map((item) =>
                                <li key={item.commentTypeId}  onClick={this.setCommentTypeId.bind(this, item.commentTypeId)}>{item.commentTypeName}</li>
                            )
                        }
                    </ul>
                    <ul className={'reply-type-item'}>
                        {
                            /* 循环评论类型列表 */
                            this.props.replyTypeList.map((item) =>
                                <li key={item.replyTypeId}  onClick={this.setReplyTypeId.bind(this, item.replyTypeId)}>{item.replyTypeName}</li>
                            )
                        }
                    </ul>
                </section>
                
            </div>
        );
    }
}

export default CommentSelecter;

